const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')
const nameBox = onBox.querySelector('.username')

// 准备一个变量， 等待请求结果赋值
let list = []

// 登录验证
testLogin()
function testLogin() {
  // 1. 怎么知道你是否登录过
  // 如果你的 localStorage 内有 login 信息, 并且值为 1, 表示你曾经登录过
  const login = getcookie('login')
  const info = getcookie('info')
  const id = getcookie('id')
  // 1-1. 获取到 localStorage 内的 login 信息
  if (login !== '1') {
    // 1-2. 证明你从来没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }
  nameBox.innerText = info
}


const index = document.querySelector('.index')
index.onclick = function(){
    window.location.href = './index.html'
}
getList()
 function getList() {
  // 1-2. 发送请求
    ajax({
        url:'http://wcy.com:9999/wcy_meizu/src/data/list.json',
        dataType:'json',
        success: function(res){
            list = res.dataList
            bindHtml()
        }
    })
}
/*
  分页逻辑  
*/
// 1. 获取元素
const ul = document.querySelector('#inner_ul8')
const prevBtn = document.querySelector('.prev')
const nextBtn = document.querySelector('.next')
const totalBox = document.querySelector('.total')
// 2. 准备变量
var info = {
    current:1,
    pagesize:8,
    total:1
}
// 3. 准备一个渲染页面的函数
function bindHtml() {
    // 3-1. 截取出当前页需要渲染的小数组
    let bind = list.slice((info.current - 1) * info.pagesize, info.current * info.pagesize)
    bind.forEach( i => {    
        let str = ''
        str += `
            <li data-id="${ i.id } " data-url="${ i.img_url }">
                <img src="${ i.img_url }" alt="">
                <div>${ i.title }</div>
                <div>${ i.name }</div>
                <div class="num_none" data-num="${ i.num }" >售罄</div>
                <div class="normal">￥${ i.new_price }</div>
                <div class="unnormal">
                    <span class="add" data-id="${ i.id }">加入购物车</span><span class="buy">立即购买</span>
                </div> 
            </li>
            `
        ul.innerHTML += str
        info.total = Math.ceil(list.length / info.pagesize)
        totalBox.innerHTML = info.current + ' / ' + info.total
        prevBtn.className = info.current <= 1 ? 'prev disable' : 'prev'
        nextBtn.className = info.current >= info.total ? 'next disable' : 'next'
        
    }) 
}
//获取本地存储的数据
function getData() {
    //把数据存在本地存储的 goods 里面
    var data = window.localStorage.getItem('goods')
    if (data !== null) {
      //把获取到的字符串格式数据转换成对象格式
      return JSON.parse(data);
    } else {
      return [];
    }
}
//保存本地存储数据
function saveData(data) {
    window.localStorage.setItem('goods', JSON.stringify(data))
}
ul.onclick = e => {
    e = e || window.event
    const target = e.target || e.srcElement
    if(target.nodeName === 'LI'){
        const goods_id = target.dataset.id - 0

        const goods = list.find(item => item.id === goods_id)
        window.localStorage.setItem('detial',JSON.stringify(goods))
        const url = target.dataset.url
        window.sessionStorage.setItem('url',url)
        window.location.href = './detial.html'
    }

    if(target.className === 'add'){
        const goods_id = target.dataset.id
        ajax({
            url:'http://wcy.com:9999/wcy_meizu/src/data/list.json',
            dataType:'json',
            success: function(res){
                const goods = res.dataList[goods_id]
                // console.log(goods.id);
                //从本地存储里面把已经存进去的数据拿出来
                const data = getData()
                //在存数据的数组里面的加一条最新点击的商品信息
                data.push(goods)
                //把最新的数据的数组存在本地存储里面
                saveData(data)  
            }
        })
        alert('加入购物车成功，快去购物车看看吧！')
    }
    if(target.className === 'buy'){
        alert('购买成功！')
    }
}

nextBtn.onclick = function () {
    // 判断, 如果 current 已经是最后一页了, 那么直接 return
    if (info.current >= info.total) return
    // 修改当前页
    info.current++
    ul.innerHTML = ''
   
    bindHtml()
   
}
prevBtn.onclick = function () {
    if (info.current <= 1) return
    // 修改当前页
    info.current--
    ul.innerHTML = ''
    bindHtml()
} 
/*
    排序
*/
const sortBtn = document.querySelectorAll('.list_sort > ul > li')
const price_sort  = document.querySelector('.price')
const num_sort = document.querySelector('.num')
const have_sort = document.querySelector('.have')
for(let i = 0;i<sortBtn.length;i++){
    sortBtn[i].dataset.index = i
    sortBtn[i].addEventListener('click',function(){
        var index = this.dataset.index
        for(let j =0;j<sortBtn.length;j++){
            sortBtn[j].classList.remove('active')
        }
        sortBtn[index].classList.add('active')
    })
}
//价格排序
price_sort.addEventListener('click',() => {

    ul.innerHTML = ''
    list.sort((a, b) => {
        return ( a.new_price - 0) - ( b.new_price  - 0)
    })
    info.current = 1
    bindHtml()

})
//销量排序
num_sort.addEventListener('click',() => {
   
    list.sort((a, b) => {
        return (a.num - 0) - (b.num - 0)
    })
    ul.innerHTML = ''
    info.current = 1
    bindHtml()
})
//默认排序
have_sort.addEventListener('click',() => {
    list.sort((a, b) => {
        return (a.id - 0) - (b.id - 0)
    })
    ul.innerHTML = ''
    info.current = 1
    bindHtml()
})

//去到购物车
const gouwuche = document.querySelector('.gouwuche')
gouwuche.addEventListener('click', () => {
  window.location.href = './cart.html'
})